elements-and-attributes

Formatting Page Content with HTML

We know now that we can add text to our HTML page by using the <p> but how can we format this text in HTML

There are many ways of doing that but we will do it using some HTML elements:

Element	Usage
<b>	Highlight important information
<strong>	Similarly to bold, to highlight key text
<i>	To denote text
<mark>	Highlight the background of the text
<small>	To shrink the text
<strike>	To place a horizontal line across the text
<u>	Used for links or text highlights
<sub>	Typographical stylistic choice
<sup>	Another typographical presentation style

Check the difference between <em> and <i>

Check the difference between <b> and <strong>

To use or apply any of these formats on any text you need to just wrap it between the opening and closing tags

<p>

this word is normal but this

<strong> word </strong> is bold

</p>

The expected output:

this word is normal but this word is bold

---

In the following section, you will be introduced to some common HTML elements and we suggest that you try these elements on your own in a CodePen

Links

Ever come across a link on a webpage that took you to another one. these links are HTML links made using the <a> tag. In order for this tag to know where it should take the user when they click it, we have to give it an href attribute.

Example

<a href="http://www.google.com">Go To Google!</a>

Can you guess where the link would take the user? As you may have guessed when the user clicks this link he will be directed to Google page

The expected output:

Go To Google!

• Explaining the noreferrer and noopener in the link tag

Images

In today’s modern digital world, images are everything. The <img> tag has everything you need to display images on your site.

In order for the image tag to display the image we need to provide it with the path to the image which can be a path for it on your device or a link from the web

<img src="images/image.jpg" alt="some image" />

The expected output is an image displayed with no specific width or height so it should take all the space that it needs (its original size).

Lists

We can create different types of lists in HTML and these two are the most common used:

Ordered List

The first is an <ol>: This is an ordered list of contents. For example:

1. An item
2. Another item
3. Another goes here.

Inside the <ol> tag we list each item on the list inside <li> </li> tags.

For example:

<ol>

<li>An item </li>

<li>Another item </li>

<li>Another goes here </li>

</ol>

The expected output

1. An item
2. Another item
3. Another goes here

Unordered List

The second type of list that you may wish to include is an <ul> unordered list. This is better known as a bullet point list and contains no numbers.

An example of this:

<ul>

<li>This is </li>

<li>An Unordered </li>

<li>List </li>

</ul>

The expected output

• This is
• An Unordered
• List